<template>
	<view class="u-page">
		<zx-nav title="用户信息" bg="#fff"></zx-nav>
		<view class="main">
			<view class="card">
				<u-cell-group :border="false">
					<u-cell title="头像">
						<div slot="value" class="avatar" @tap="upload"><image :src="userInfo.wx_img" mode="widthFix"></image></div>
					</u-cell>
					<u-cell
						title="昵称"
						:value="userInfo.wx_name"
						:isLink="true"
						:rightIconStyle="{
							fontSize: '14px'
						}"
						@tap="editUserName"
					></u-cell>
					<u-cell
						title="性别"
						:value="userInfo.wx_sex == 2 ? '女' : userInfo.wx_sex == 1 ? '男' : ''"
						:isLink="true"
						:rightIconStyle="{
							fontSize: '14px'
						}"
						@tap="editSex"
					></u-cell>
					<u-cell
						title="手机号码"
						:value="userInfo.phone"
						:rightIconStyle="{
							fontSize: '14px'
						}"
					></u-cell>
					<u-cell
						title="绑定微信号"
						:border="false"
						:isLink="true"
						:rightIconStyle="{
							fontSize: '14px'
						}"
					>
						<template slot="value">
							<!-- <text v-if="userInfo.unionid">已绑定</text> -->
							<button lang="zh_CN" @click="getUserProfile" class="u-reset-button" style="width: 300rpx;height: 40rpx;"></button>
						</template>
					</u-cell>
				</u-cell-group>
			</view>
			<view class="mt50"></view>
			<u-button @click="showActionSheet = true" shape="circle">退出登录</u-button>
		</view>

		<tui-actionsheet
			:show="showActionSheet"
			:tips="tips"
			:item-list="itemList"
			:mask-closable="true"
			:is-cancel="true"
			@click="itemClick"
			@cancel="showActionSheet = false"
		></tui-actionsheet>
		<avatar @upload="doUpload" @avtinit="doBefore" quality="1" ref="avatar"></avatar>
	</view>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import avatar from '@/uni_modules/yq-avatar/yq-avatar.vue';
import tuiActionsheet from '@/components/actionsheet/actionsheet';
export default {
	data() {
		return {
			info: {},
			wx_img: '',
			showActionSheet: false,
			tips: '退出登录会清除您的登录信息，确认退出吗？',
			itemList: [
				{
					text: '退出登录',
					color: '#e53a37'
				}
			]
		};
	},
	computed: {
		...mapState(['userInfo', 'openid'])
	},
	components: { avatar, tuiActionsheet },
	onShow() {
		console.log(this.openid);
		this.wx_img = this.userInfo.wx_img;
	},
	methods: {
		...mapMutations(['uploadPhone', 'uploadMemberId', 'uploadUserInfo']),
		...mapActions(['Logout', 'getUserInfo']),
		uploadInfo(param) {
			let that = this;
			let option = {
				...param,
				openid: that.userInfo.openid
			};
			this.$postAction(this.$api.updateUserInfo, option).then(da => {
				if (da.code == 0) {
					uni.showToast({
						title: '更新成功',
						icon: 'none'
					});
					that.getUserInfo();
				}
			});
		},

		doBefore() {},
		doUpload(rsp) {
			this.uploadImg(rsp.path);
			this.wx_img = rsp.path;
		},

		upload() {
			this.$refs.avatar.fChooseImg('', {
				selWidth: '600upx',
				selHeight: '600upx',
				expWidth: '600upx',
				expHeight: '600upx',
				inner: 'true'
			});
		},
		uploadImg(imgpath) {
			var that = this;
			uni.uploadFile({
				url: this.$api.upload,
				filePath: imgpath,
				name: 'file',
				success: function(uploadFileRes) {
					let img = JSON.parse(uploadFileRes.data).data.src;
					that.wx_img = img;
					that.uploadInfo({ wx_img: that.wx_img });
					console.log('img', img);
				}
			});
		},
		editUserName() {
			uni.navigateTo({
				url: '/pages/mine/editpage/username?username=' + this.userInfo.wx_name
			});
		},
		editSex() {
			uni.navigateTo({
				url: '/pages/mine/editpage/sex'
			});
		},
		itemClick: function(e) {
			let index = e.index;
			this.showActionSheet = false;
			/* 退出登录 */
			this.exit();
		},
		exit() {
			this.Logout();
		},
		getUserProfile() {
			console.log('hahah');
			uni.getUserProfile({
				lang: 'zh_CN',
				desc: '用户登录',
				success: res => {
					console.log('获取到的用户信息', res);
					let userInfo = res.userInfo;
					this.uploadInfo({
						wx_img: userInfo.avatarUrl,
						wx_name: userInfo.nickName,
						wx_sex: userInfo.gender
					});
				},
				// 失败回调
				fail: err => {
					console.log('选择了拒绝');
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
	background: #f4f4f4;
}
.main {
	margin-top: 36upx;
	.card {
		padding: 0 28upx;
	}
	::v-deep .u-cell__body {
		padding: 36rpx 10rpx !important;
	}
}
.cu-item span {
	text-align: right;
	color: #7c7c7c;
}

.tip {
	color: #8b8b8b;
	font-size: 28upx;
}

.avatar {
	width: 140upx;
	height: 140upx;
	margin: 10upx 0;

	image {
		border-radius: 100%;
		width: 100%;
		height: 100%;
		overflow: hidden;
		border: 1px solid #19a967;
	}
}
</style>
